<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/template/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/template/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/template/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/template/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/template/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/template/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/template/static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/template/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <script src="__STATIC__/echarts.js"></script>
    <title>3D柱状图</title>
</head>
<body>

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 3D柱状图
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div class="page-container">
    <div class="f-14 c-error"></div>
    <div id="container" style="min-width:700px;height:400px">
        {foreach name='$arr' id='v'}
        <input name="" type="hidden" class="arr" value="{$v}"/>
        {/foreach}
    </div>
    <div id="main" style="width: 800px;height:400px;"></div>
</div>
<div style="display: none">
    {foreach name='$data' key='k' id='v'}
        <input name="" type="hidden" class="browse" data-key="{$k}" value="{$v}"/>
    {/foreach}
    <input type="hidden" id="users"  value="{$users}"/>
    <input type="hidden" id="user_day"  value="{$user_day}"/>
    <input type="hidden" id="active"  value="{$active}"/>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/template/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/template/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/template/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/template/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/template/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="__STATIC__/template/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript" src="__STATIC__/template/lib/hcharts/Highcharts/5.0.6/js/highcharts-3d.js"></script>
<script type="text/javascript">
    $(function () {
        var arr = new Array();
        $('.arr').each(function(res){
            arr.push($(this).val());
        });
        var browse = new Array();

        $('.browse').each(function(res){
            browse.push($(this).val());
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '产品点击量'
            },
            tooltip: {},
            legend: {
                data:['点击量']
            },
            xAxis: {
                data: arr
            },
            yAxis: {},
            series: [{
                name: '点击量',
                type: 'bar',
                data: browse
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
    var myChart = echarts.init(document.getElementById('main'));
    /*var user    = new Array();
    $('.user').each(function(res){
        user.push($(this).val());
    });*/
   // console.log(user);
    var users = $('#users').val();
    var user_day = $('#user_day').val();
    var active = $('#active').val();
    myChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['用户总数','今日注册数','活跃人数']
        },
        series : [
            {
                name: '数量',
                type: 'pie',
                radius: [0, '30%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:users, name:'用户总数'},
                    {value:user_day, name:'今日注册数'},
                    {value:active, name:'活跃人数'}
                ]
            },
            {
                name: '数量',
                type: 'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data: [
                    {value: users, name: '用户总数'},
                    {value: user_day, name: '今日注册数'},
                    {value: active, name: '活跃人数'}
                    /*{value: 135, name: '视频广告'},
                    {value: 1048, name: '百度'},
                    {value: 251, name: '谷歌'},
                    {value: 147, name: '必应'},
                    {value: 102, name: '其他'}*/
                ]
            }
        ]
    })
</script>
</body>
</html>